/**
 * 地址簿 
 */ 
<template>
  <view class="address-book">
    <u-loading-page :loading="loading"></u-loading-page>
    <view class="address-book-card" v-for="(item,i) in addressBookList" :key="i">
      <view class="address-book-card-left" @click="selectAddress(item)">
        <image class="radio-icon" :src="selectId === item.id ? checkUrl: noCheckUrl" mode="widthFix" />
        <view class="left-info">
          <view class="left-info-user">
            <text>{{item.name}}</text>
            <text>{{item.mobile}}</text>
          </view>
          <view class="left-info-address">{{item.province}}{{item.city}}{{item.area}}{{ item.address }}</view>
        </view>
      </view>
      <view class="address-book-card-right">
        <u-icon name="lock" size="24px" color="#999"></u-icon>
        <!-- <u-icon name="lock-open" size="24px" color="#999"></u-icon> -->
        <view class="icon-divide"></view>
        <image class="lock-edit-icon" src="@/static/addressBook/edit.png" @click="addEditNewContact(item)" mode="widthFix" />
      </view>
    </view>
    <view class="address-book-empty" v-if="total===0">
      <image src="@/static/common/empty.png" class="address-book--pic" mode="widthFix"></image>
      <text>还没有联系人</text>
    </view>
    <view class="address-book-btn">
      <button class="add-new-contact" @click="addEditNewContact('')">新增地址</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressBookList: [],
      total: 0,
      selectId: '',
      noCheckUrl: require('@/static/addressBook/radio-no-check.png'),
      checkUrl: require('@/static/addressBook/radio-check.png'),
      currentType: '',
      loading: true
    };
  },
  onLoad(options) {
    this.currentType = options.type
  },
  onShow() {
    this.pageInit()
  },
  methods: {
    addEditNewContact(item){
      const currentAddress = item ? encodeURIComponent(JSON.stringify(item)) : ''
      uni.navigateTo({
        url: `/cmhqPage/editCreateAddress/editCreateAddress?currentAddress=${currentAddress}`
      })
    },
    pageInit(){
      this.$http.get('ziaddress/list', {
				pageNo: 1,
        pageSize: 10
			}, res => {
				if (res.code === 'success') {
          this.total = res.data.total
          this.addressBookList = res.data.items
          this.selectId = this.addressBookList[0] ? this.addressBookList[0].id : ''
				}
        this.loading = false
			})
    },
    selectAddress(item){
      let currentAddress = encodeURIComponent(JSON.stringify(item))
      if(this.currentType === 'send'){
        uni.setStorageSync('currentAddress', currentAddress)
      }else if(this.currentType ==='receive'){
        uni.setStorageSync('currentReceiveAddress', currentAddress)
      }else if(this.currentType ==='batch'){
        console.log('---');
        
        uni.$emit('updateBatchAddress', currentAddress)
      }
      this.selectId = item.id
      uni.navigateBack({ delta: 1 })
    }
  },
};
</script>

<style lang="scss" scoped>
  .address-book{
    background-color: #fff;
    height: 100vh;
    .address-book-card{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 24rpx;
      padding: 36rpx 8px;
      border-bottom: 2rpx solid #999;
      .address-book-card-left{
        display: flex;
        align-items: center;
        cursor: pointer;
        .radio-icon{
          width: 48rpx;
          height: 48rpx;
          margin-right: 8rpx;
        }
        .left-info{
          width: 472rpx;
          flex-shrink: 0;
          .left-info-user{
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            text:first-child{
              padding-right: 8rpx;
            }
          }
          .left-info-address{
            font-size: 24rpx;
            color: #333;
          }
        }
      }
      .address-book-card-right{
        display: flex;
        align-items: center;
        .icon-divide{
          width: 2rpx;
          height: 36rpx;
          background-color: #999;
          margin: 0 16rpx;
        }
        .lock-edit-icon{
          width: 36rpx;
          height: 36rpx;
        }
      }
    }
    .address-book-empty{
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 64rpx;
      flex-direction: column;
			.address-book--pic{
				width: 240rpx;
			}
      text{
        font-size: 24rpx;
        color: #999;
        margin-top: 16rpx;
      }
    }
    .address-book-btn{
      position: fixed;
      bottom: 20rpx;
      left: 0;
      width: 100%;
      height: 88rpx;
      padding: 0 24rpx;
      box-sizing: border-box;
      .add-new-contact{
        color:#ffffff;
        background-color:#e69b3f;
        border-color:#e69b3f;
        width:100%;
        font-size: 36rpx;
      }
    }
  }
</style>
